<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3521793b660147d7e090bb8298f232eb"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="primary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				燃气管网
			</mu-appbar>
			<mu-container style="padding: 0; padding-top: 76px;">
				<div id="map" style="height: calc(100%);width: 100%;">

				</div>
				<mu-dialog width="100%" transition="slide-bottom" fullscreen :open.sync="previewDialogFlag">
					<mu-appbar color="primary" :title="previewPoint.name+'['+previewPoint.lng+','+previewPoint.lat+','+previewPoint.hight+'m]'">
						<mu-button slot="right" flat @click="previewDialogFlag=false">
							关闭
						</mu-button>
					</mu-appbar>
					<div style="padding: 24px;">
						<mu-form label-position="left" label-width="100">
							<div v-for="(item,index) in previewPoint.fields" :key="index">
								<mu-form-item :label="item.field" v-if="item.fieldType=='文本'">
									<div v-if="item.urls">{{item.urls}}</div>
								</mu-form-item>
								<mu-form-item :label="item.field" v-if="item.fieldType=='图片'">
									<div v-if="!item.urls||item.urls==' '">暂无图片</div>
									<img v-if="item.urls&&item.urls!=' '" class="avatar" :preview="index" :src="item.urls" />
								</mu-form-item>
								<mu-form-item :label="item.field" v-if="item.fieldType=='相册'">
									<div v-if="!item.urls||item.urls==' '">相册暂无图片</div>
									<el-carousel v-if="item.urls&&item.urls!=' '" :interval="4000" height="200px" type="card" style="width: 50%;position: relative;">
										<el-carousel-item v-for="(img,index) in item.urls.split(',')" :key="index">
											<img :preview="index" :src="img" style="width: 100%;height: 200px;" />
											<div v-if="item.remark" style="width: 100%;background-color: rgba(0,0,0,.5);position: absolute;top: 0;z-index: 20;color: white;word-break:break-all;">
												{{item.remark[index]}}
											</div>
										</el-carousel-item>
									</el-carousel>
								</mu-form-item>
								<mu-form-item :label="item.field" v-if="item.fieldType=='VR图片'">
									<div v-if="!item.urls||item.urls==' '">暂无VR图片</div>
									<el-button v-if="item.urls&&item.urls!=' '" icon="el-icon-search" @click="openVR(item.urls)" circle></el-button>
								</mu-form-item>
								<mu-form-item :label="item.field" v-if="item.fieldType=='视频'">
									<div v-if="!item.urls||item.urls==' '">暂无视频</div>
									<video v-if="item.urls&&item.urls!=' '" :src="item.urls" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
								</mu-form-item>
							</div>
						</mu-form>
					</div>
				</mu-dialog>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					map: '',
					havePipelineDepartmentList: [],
					pipelineList: [],
					pipelineMidlineList: [],
					selectedDepartmentIds: [],
					addPointDialogVisible: false,
					point: {
						name: '',
						lng: '',
						lat: '',
						hight: '',
						parentPointId: '',
						pipelineId: '',
						pointTypeId: '',
						fields: []
					},
					pointTypeList: [],
					uploadUrl: util.website + '/conduit/file/uploadFile',
					pointItem: {},
					pointImageItem: {},
					pointPictureCardItem: {},
					imagesCardDialogVisible: false,
					pointList: [],
					videoUploadPercent: 0,
					previewDialogFlag: false,
					previewPoint: {
						name: '',
						lng: '',
						lat: '',
						hight: '0',
						parentPointId: '',
						pipelineId: '',
						pointTypeId: '',
						fields: []
					},
					creatPatrolTaskDialog: false,
					patrolManList: [],
					patrolTask: {
						userId: '',
						patrolLinePoints: '',
						startDate: '',
						patrolLinePoints2: []
					},
					patrolTaskDialog: false,
					patrolTaskList: [],
					patrolTaskStart: 1,
					patrolTaskLimit: 20,
					patrolTaskTotal: 20,
					patrolTaskMark: '',
					satelLite: '', // 谷歌卫星图层
					pSatelLite: '', // 谷歌地形图层
					tileLayer: '2D图',
					treeDepartmentlist: [],
					departmentProps: {
						"value": "id",
						"label": "name",
						"children": "children"
					}
				}
			},
			mounted() {

			},
			methods: {
				initMap() {
					this.map = new AMap.Map('map', {
						zoom: 11, //级别
					})
					var map = this.map
					var contextMenu = new AMap.ContextMenu()
					// 右键缩小
					contextMenu.addItem('添加标记点', () => {
						this.addPointDialogVisible = true
					}, 1)
					this.map.on('rightclick', e => {
						this.point.lng = e.lnglat.lng
						this.point.lat = e.lnglat.lat
						contextMenu.open(this.map, e.lnglat)
					})
					AMap.plugin([
						'AMap.ToolBar',
					], function() {
						// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
						map.addControl(new AMap.ToolBar({
							// 简易缩放模式，默认为 false
							liteStyle: true
						}));
					});
					/** lyrs
				 * m： 路线图
				t： 地形图
				p： 带标签的地形图
				s： 卫星图
				y： 带标签的卫星图
				h： 标签层（ 路名、 地名等）
				 */
					this.satelLite = new AMap.TileLayer({
						getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile'
					})
					this.pSatelLite = new AMap.TileLayer({
						getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=p&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile'
					})
				},
				selectedMapTileLayerChange(tileLayer) {
					if (tileLayer == '2D图') {
						this.satelLite.setMap(null)
						this.pSatelLite.setMap(null)
					} else if (tileLayer == '卫星图') {
						this.satelLite.setMap(this.map)
						this.pSatelLite.setMap(null)
					} else if (tileLayer == '地形图') {
						this.satelLite.setMap(null)
						this.pSatelLite.setMap(this.map)
					} else if ('3D图') {
						this.map = new AMap.Map('map', {
							pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
							viewMode: '3D' // 地图模式
						})
					}
				},
				makerMoveAlong(patrolLinePoints) { // 巡逻任务轨迹回放
					this.patrolTaskDialog = false
					var marker, lineArr = []
					var points = patrolLinePoints.split('#')
					points.forEach(item => {
						var point = item.split(',')
						lineArr.push(point)
					})
					var map = this.map
					marker = new AMap.Marker({
						map: map,
						position: lineArr[0],
						icon: 'https://webapi.amap.com/images/car.png',
						offset: new AMap.Pixel(-26, -13),
						autoRotation: true,
						angle: -90
					})
					this.patrolTaskMark = marker
					// 绘制轨迹
					var polyline = new AMap.Polyline({
						map: map,
						path: lineArr,
						showDir: true,
						strokeColor: '#28F', // 线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6 // 线宽
						// strokeStyle: "solid"  //线样式
					})

					var passedPolyline = new AMap.Polyline({
						map: map,
						// path: lineArr,
						strokeColor: '#AF5', // 线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6 // 线宽
						// strokeStyle: "solid"  //线样式
					})

					marker.on('moving', function(e) {
						passedPolyline.setPath(e.passedPath)
					})
					marker.moveAlong(lineArr, 200)
					map.setFitView()
				},
				openPatrolTaskDialog() {
					this.clearMap()
					this.getHavePipelineDepartments()
					this.getPointTypeList()
					this.openMapDrawPolyline()
					this.getPatrolMan()
					util.ajax('/api/method/getPatrolTask', null, data => {
						this.patrolTaskList = data.object
						this.patrolTaskDialog = true
					})
				},
				getPatrolMan() {
					util.ajax('/api/method/getPatrolMan', null, data => {
						this.patrolManList = data.object
					})
				},
				openCreatPatrolTaskTip() {
					this.openMapDrawPolyline()
					this.$notify({
						title: '提示',
						message: '请在地图中单击鼠标左键绘制巡检路线，双击鼠标左键或鼠标右键结束绘制',
						type: 'warning'
					})
				},
				createPatrolTask() {
					if (!this.patrolTask.userId) {
						util.tip('请选择巡检人员！')
						return
					}
					if (!this.patrolTask.startDate) {
						util.tip('请设置巡检任务开始时间！')
						return
					}
					if (!this.patrolTask.patrolLinePoints2) {
						util.tip('请设置巡检路段！')
						return
					}
					var params = {
						'userId': this.patrolTask.userId,
						'startDate': this.patrolTask.startDate,
						'patrolLinePoints': this.patrolTask.patrolLinePoints2
					}
					util.ajax('/api/method/createPatrolTask', params, data => {
						util.tip(data.msg, 'success')
						if (data.code == 1) {
							this.creatPatrolTaskDialog = false
						}
					})
				},
				openMapDrawPolyline() { // 开启鼠标画线 用于任务巡检
					var overlays = []
					// 通过插件方式引入 AMap.MouseTool 工具
					this.map.plugin(['AMap.MouseTool'], () => {
						// 在地图中添加MouseTool插件
						var mouseTool = new AMap.MouseTool(this.map)

						// 用鼠标工具画多边形
						var drawPolygon = mouseTool.polyline()

						// 添加事件
						AMap.event.addListener(mouseTool, 'draw', e => {
							this.patrolTask = {
								userId: '',
								patrolLinePoints: '',
								startDate: '',
								patrolLinePoints2: []
							}
							var path = []
							overlays.push(e.obj)
							e.obj.getPath().forEach(item => {
								path.push(item.lng + ',' + item.lat)
								this.patrolTask.patrolLinePoints2 = path.join('#')
								this.patrolTask.patrolLinePoints = path.join('\n')
								this.creatPatrolTaskDialog = true
								// this.map.remove(overlays)
								overlays = []
								mouseTool.close(true)
							})
						})
					})
				},
				openVR(url) {
					window.open('vr.html?url=' + url)
				},
				clearMap() {
					this.map.clearMap()
				},
				getPointListByPipelineId(id) {
					var params = {
						'pipelineId': id
					}
					util.ajax('/api/method/getPointListByPipelineId', params, data => {
						this.pointList = [{
								name: '起点',
								lng: '0',
								lat: '0',
								hight: '0',
								id: -1
							},
							{
								name: '非焊口、阀室、站场请选此',
								lng: '0',
								lat: '0',
								hight: '0',
								id: -2
							}
						].concat(data.object)
					})
				},
				addPoint() {
					if (!this.point.name) {
						util.tip('请输入标记点名称!')
						return
					}
					if (!this.point.lng) {
						util.tip('请输入标记点经度!')
						return
					}
					if (!this.point.lat) {
						util.tip('请输入标记点纬度!')
						return
					}
					// 				if(!this.point.hight){
					// 					util.tip("请输入标记点高度!");
					// 					return;
					// 				}
					if (!this.point.pipelineId) {
						util.tip('请选择所属管道!')
						return
					}
					if (!this.point.pointTypeId) {
						util.tip('请选择标记点类型!')
						return
					}
					if (!this.point.parentPointId) {
						util.tip('请选择上级标注点!')
						return
					}
					var fields = []
					var fieldTypes = []
					var fieldValues = []
					var fieldRemarks = []
					console.log(this.point)
					this.point.fields.forEach(item => {
						fields.push(item.field)
						fieldTypes.push(item.fieldType)
						if (!item.value) {
							fieldValues.push(' ')
						} else {
							fieldValues.push(item.value)
						}

						if (item.fieldType == '相册' && item.remark) {
							fieldRemarks.push(item.remark.join("@"))
						} else if (item.remark) {
							fieldRemarks.push(item.remark)
						} else {
							fieldRemarks.push(" ")
						}
					})
					var params = {
						'point.name': this.point.name,
						'point.lng': this.point.lng,
						'point.lat': this.point.lat,
						'point.hight': this.point.hight,
						'point.parentPointId': this.point.parentPointId,
						'point.pipelineId': this.point.pipelineId,
						'point.pointTypeId': this.point.pointTypeId,
						'fields': fields.join('#'),
						'fieldTypes': fieldTypes.join('#'),
						'fieldValues': fieldValues.join('#'),
						'remarks': fieldRemarks.join('#')
					}
					util.ajax('/point/addPoint', params, data => {
						util.tip(data.msg, 'success')
						if (data.code == 1) {
							this.point = {
								name: '',
								lng: '',
								lat: '',
								hight: '0',
								parentPointId: '',
								pipelineId: '',
								type: '',
								fields: []
							}
							this.addPointDialogVisible = false
							this.selectedDepartementChange(this.selectedDepartmentIds)
						}
					})
				},
				selectedDepartementChange(val) {
					this.selectedDepartmentIds = val;
					this.clearMap();
					if (val.length != 0) {
						this.getPipelineByDepartmentIds(this.selectedDepartmentIds)
					}
				},
				drawPipelineMidline(points) { // 画中线
					var path = []
					points.forEach(item => {
						path.push([item.lng, item.lat])
					})
					var polyline = new AMap.Polyline({
						path: path,
						isOutline: true,
						outlineColor: '#CCCCCC',
						borderWeight: 1,
						strokeColor: '#CCCCCC',
						strokeOpacity: 1,
						strokeWeight: 1,
						// 折线样式还支持 'dashed'
						strokeStyle: 'dashed',
						// strokeStyle是dashed时有效
						// strokeDasharray: [10, 5],
						lineJoin: 'round',
						lineCap: 'round',
						zIndex: 50
					})
					polyline.setMap(this.map)
					this.map.setFitView([polyline])
				},
				getPipelineMidline(pipelineIds) { // 获取管道中线
					this.pipelineMidlineList = []
					pipelineIds.forEach(id => {
						var params = {
							'pipelineId': id
						}
						util.ajax('/api/method/getMidline', params, data => {
							this.pipelineMidlineList.push(data.object)
							this.drawPipelineMidline(data.object)
						})
					})
				},
				getPipelineByDepartmentIds(departmentIds) { // 获取管道
					this.pipelineList = []
					var params = {
						'departmentIds': departmentIds.join(',')
					}
					util.ajax('/api/method/getPipelineByDepartmentIds', params, data => {
						this.pipelineList = data.object
						var pipelineIds = []
						this.pipelineList.forEach(item => {
							pipelineIds.push(item.id)
						})
						this.getPointsOnPipelineByPipelineList(this.pipelineList)
						this.getPointsNotOnPipelineByPipelineId(this.pipelineList)
						this.getPipelineMidline(pipelineIds)
					})
				},
				getHavePipelineDepartments() { // 获取拥有管道的部门
					util.ajax('/api/method/getHavePipelineDepartments', null, data => {
						this.havePipelineDepartmentList = data.object
						this.havePipelineDepartmentList.forEach(item => {
							this.selectedDepartmentIds.push(item.id)
						})
						this.getPipelineByDepartmentIds(this.selectedDepartmentIds)
					})
				},
				getPointTypeList() {
					util.ajax('/point/getPointTypeList', null, data => {
						this.pointTypeList = data.object
					})
				},
				getPointTypeFields(pointTypeId) {
					var params = {
						pointTypeId: pointTypeId
					}
					util.ajax('/api/method/getPointTypeFields', params, data => {
						this.point.fields = data.object
						this.point.fields.forEach(item => {
							if (item.fieldType == '相册') {
								item['value'] = []
								item["remark"] = []
							} else {
								item['value'] = ''
								item["remark"] = ""
							}
						})
					})
				},
				getPointsNotOnPipelineByPipelineId(pipelines) { // 获取不在管道线上的标注点
					pipelines.forEach(pipeline => {
						var params = {
							'pipelineId': pipeline.id
						}
						util.ajax('/point/getPointsNotOnPipelineByPipelineId', params, data => {
							this.drawPieline(pipeline, data.object);
							this.drawPoint(data.object)
						})
					})
				},
				getPointsOnPipelineByPipelineList(pipelines) { // 获取在管道线上的标注点
					pipelines.forEach(pipeline => {
						var params = {
							'pipelineId': pipeline.id
						}
						util.ajax('/point/getPointsOnPipelineByPipelineId', params, data => {
							this.drawPieline(pipeline, data.object)
							this.drawPoint(data.object)
						})
					})
				},
				drawPoint(pointList) {
					var path = []
					pointList.forEach(item => {
						var marker = new AMap.Marker({
							position: new AMap.LngLat(item.lng, item.lat),
							offset: new AMap.Pixel(-10, -10),
							icon: item.pointType.icon // 添加 Icon 图标 URL
						})
						AMap.event.addListener(marker, 'click', (event) => this.markerClick(event, item))
						this.map.add(marker)
					})
				},
				markerClick(event, item) {
					this.previewPoint = JSON.parse(JSON.stringify(item));
					this.previewPoint.fields.forEach(tmp => {
						if (tmp.fieldType == '相册' && tmp.remark) {
							tmp.remark = tmp.remark.split("@")
						}
					})
					this.previewDialogFlag = true
				},
				drawPieline(pipeline, pointList) { // 画管道线
					var path = []
					pointList.forEach(item => {
						path.push([item.lng, item.lat])
					})
					var polyline = new AMap.Polyline({
						path: path,
						isOutline: true,
						outlineColor: pipeline.color,
						borderWeight: 1,
						strokeColor: pipeline.color,
						strokeOpacity: 1,
						strokeWeight: 1,
						// 折线样式还支持 'dashed'
						strokeStyle: 'solit',
						// strokeStyle是dashed时有效
						// strokeDasharray: [10, 5],
						lineJoin: 'round',
						lineCap: 'round',
						zIndex: 50
					})
					polyline.setMap(this.map)
					this.map.setFitView([polyline])
				},
				handleImgSuccess(response, file, fileList, item) {
					item.value = response
					this.point = Object.assign({}, this.point)
				},
				handlePictureCardSuccess(response, file, fileList, item) {
					item.value.push(response);
					this.point = Object.assign({}, this.point)
					this.$prompt('请输入该图片描述', '提示', {
						confirmButtonText: '确定',
						inputPattern: /\S/,
						inputErrorMessage: '图片描述不能为空'
					}).then(({
						value
					}) => {
						item.remark.push(value);
					}).catch(() => {
						item.remark.push(" ");
					});
				},
				imageBeforeUpload(item) {
					this.pointItem = item
				},
				pictureCardBeforeUpload(item) {
					this.pointItem = item
				},
				handleRemove() {
					return false
				},
				handlePictureCardPreview(file) {
					this.pointItem.value = file.url
					this.imagesCardDialogVisible = true
				},
				handleVideoSuccess(response, file, fileList, item) {
					item.value = response
					this.point = Object.assign({}, this.point)
				},
				uploadVideoProcess(event, file, fileList) {
					this.videoUploadPercent = file.percentage.toFixed(0)
				},
				getDepartmentList() {
					util.ajax("/department/getDepartmentList", null, data => {
						this.treeDepartmentlist = this.setTreeData(data.object);
					})
				},
				setTreeData(data) {
					let tree = data.filter((father) => { //循环所有项
						let branchArr = data.filter((child) => {
							return father.id == child.superId //返回每一项的子级数组
						});
						if (branchArr.length > 0) {
							father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
						}
						return father.superId == 0; //返回第一层
					});
					return tree //返回树形数据
				},
			}
		})
		document.addEventListener('plusready', function() {
			vm.initMap()
			vm.getHavePipelineDepartments()
			vm.getPointTypeList()
			// this.initWebSocket()
			vm.getDepartmentList()
		});
	</script>
</html>
